<template>
  <view>
    <view class="list p-20" >
      <view class="item mb-32" v-for="(item,index) in list" :key="index">
        <!--商品-->
        <view class="goods">
          <image class="l" mode="aspectFill" :src="item.product_image"></image>
          <view class="r line1">
            {{item.product_name}}
          </view>
        </view>
        <uni-collapse >
          <uni-collapse-item :title="'您有'+item.card_list.length+'项权益'" :show-animation="true">
            <view class="content">
              <!--卡项-->
              <view class="card-list">
                <view class="card-item" v-for="(card,cardIndex) in item.card_list" :key="cardIndex">
                  <view class="card-item-main">
                    <image class="l" :src="card.card_image"></image>
                    <view class="c">
                      <view class="line2 card_name">{{ card.card_name }}</view>
                      <view class="times fs-22">剩余{{ card.left_write_times }}次/共{{ card.write_times }}次</view>
                    </view>
                    <view v-if="card.is_valid=='y'" @click="openCode(item,card)" class="r btn-default btn-blue">
                      去核销
                    </view>
                    <view v-else class="r btn-default btn-disabled">
                      去核销
                    </view>
                  </view>
                  <view class="card-item-time">
                    <view>有效日期：</view>
                    <view>
                      <text v-if="card.write_valid==1">永久有效</text>
                      <text v-if="card.write_valid==2">{{ card.write_start }}生效</text>
                      <text v-if="card.write_valid==3">{{ card.write_start }} ~ {{ card.write_end }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>
    <verifyModal
        v-if="showQrcode"
        :qrcode="config.qrc"
        :visible="showQrcode"
        :verifyCode="nowCard.verify_code"
        type="codeToImg"
        @closeModal="closeQr"></verifyModal>
  </view>
</template>

<script>
import verifyModal from "@/pages/goods/components/verifyModal"
import {getUserCardList} from "@/api/leaseOrder";
import {getUserInfo} from "@/api/user";
export default {
  components:{
    verifyModal
  },
  data() {
    return {
      showQrcode:false,
      config: {
        qrc: {
          code: "",
          size: 360, // 二维码大小
          level: 4, //等级 0～4
          bgColor: '#FFFFFF', //二维码背景色 默认白色
          color: ['#333', '#333'], //边框颜色支持渐变色
        }
      },
      nowCard:{},
      list:[],
      userInfo:{}
    }
  },
  onLoad(option) {
    this.getUserInfo()
  },
  onShow(){
    this.getUserCardList()
  },
  methods: {
    closeQr(){
      this.showQrcode = false
      this.getUserCardList()
    },
    getUserInfo(){
      getUserInfo().then((res) => {
        if(res.status===200){
          this.userInfo=res.data
        }
      })
    },
    openCode(item,card) {
      this.nowCard=card
      let info =`${card.verify_code},${item.order_id},${this.userInfo.uid}`
      this.config.qrc.code = info
      this.showQrcode=true
    },
    getUserCardList(){
      getUserCardList().then(res=>{
        if(res.status==200){
          this.list=res.data
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.list{
  .item{
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    background: #fff;
    .goods{
      display: flex;
      .l{
        flex: 0 0 120rpx;
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
      }
    }
  }
}
.card-list{
  padding-bottom: 20rpx;
  .card-item{
    padding: 10px;
    background: #f5f5f5;
    border-radius: 10px;
    margin-top: 10px;
    .card-item-main{
      display: flex;
      align-items: center;
      .l{
        height: 125rpx;
        flex: 0 0 125rpx;
      }
      .c{
        height: 125rpx;
        padding: 4px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .card_name{
          width: 340rpx;
        }
        .times{
          color: #aaa;
        }
      }
    }
    .card-item-time{
      display: flex;
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}
/deep/.uni-collapse-item__title-text{
  font-size: 26rpx;
  color: #999;
}
</style>